<template>
  <div>
    <div class="head">
      <a @click="$router.go(-1)" class="return"></a>
    </div>
    <div class="overlay">
      <van-row class="term">
        <van-col span="12">
          <p>{{company}}</p>
          <p>{{$t('DepositBuy.v1')}}</p>
        </van-col>
        <van-col span="12">
          <p @click="$router.push({path:'TransactionRules'})">{{$t('DepositBuy.v2')}}</p>
        </van-col>
      </van-row>
      <van-row class="price" type="flex" align="center">
        <!-- <van-col span="1">
          <i>¥</i>
        </van-col> -->
        <van-col span="24">
          <van-cell-group>
            <van-field maxlength="20" v-model.trim="value" :placeholder="placeolder"/>
          </van-cell-group>
        </van-col>
      </van-row>
      <p class="useNumber">
        {{$t('DepositBuy.v3')}}
        <i>{{this.listnumber}}</i>{{placeholderBuy}}
      </p>
      <p class="chooseCoin">{{$t('DepositBuy.v4')}}</p>
      <div class="chooseItem">
        <van-dropdown-menu active-color="#333">
          <van-dropdown-item v-model="value1" :options="option1" @change="check(value1)"/>
        </van-dropdown-menu>
      </div>
      <p class="chooseCoin" v-if="reward ==1">{{$t('DepositBuy.v5')}}</p>
      <van-row class="price" type="flex" align="center" v-if="reward ==1">
        <!-- <van-col span="1">
          <i>¥</i>
        </van-col> -->
        <van-col span="24">
          <van-cell-group>
            <van-field disabled v-model="value2"/>
          </van-cell-group>
        </van-col>
      </van-row>
      <div class="explain">
        <p>{{$t('DepositBuy.v6')}}</p>
        <p v-html="buySure"></p>
      </div>
      <div class="server">
        <van-checkbox v-model="checked"></van-checkbox>
        <p>
          {{$t('DepositBuy.v7')}}
          <i @click="showLists">《{{$t('DepositBuy.v8')}}》</i>{{$t('DepositBuy.v9')}}
        </p>
      </div>
      <div class="appointmentBtn">
        <van-button slot="button" size="normal" type="info" :loading="loading" :loading-text="$t('DepositBuy.v10')"
                    @click.native="appointmentbtn">{{$t('DepositBuy.v10')}}
        </van-button>
      </div>
    </div>
    <van-popup v-model="showList" position="bottom">
      <div class="abs">
        <p>{{$t('DepositBuy.v8')}}</p>
        <p v-html="agreement"></p>
        <p @click="showList = false">{{$t('DepositBuy.v11')}}</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
    import {DropdownMenu, DropdownItem, Checkbox, CheckboxGroup} from "vant";
    import {coinMmoney} from './../utils/api';

    let _this;
    export default {
        data() {
            return {
                valuess: false,
                list: [],
                listnumber: '',
                number: '',//传过来的值
                reward: 0,
                rewardNumber: 0,
                option1: [],
                placeolder: this.$t('DepositBuy.v12'),
                magnification: 0,//倍率
                EXUUPrice: 0,//价格
                USDTPrice: 0,//价格
                coinId: 0,// 1:EXUU  2:USDT
                value: '',
                value2: 0,
                value1: 1,
                checked: false,
                showList: false,
                buySure: '',
                agreement: '',
                placeholderBuy: '',
                pages: 1,
                loading: false,
                company: ''
            }
        },
        watch: {
            value: function () {
                let value = '' + this.value;
                value = value
                    .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
                    .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
                    .replace('.', '$#$')
                    .replace(/\./g, '')
                    .replace('$#$', '.')
                    .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
                if (value.indexOf('.') < 0 && value != '') {
                    // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                    value = parseFloat(value);
                }
                try {
                    this.value = value.replace(/[^\d^\.]+/g, "");
                } catch (error) {

                }
                this.value = this.value.replace(/[^\d^\.]+/g, "")
                if (this.pages == 1) {
                    this.value2 = (this.value * parseFloat(this.magnification) * this.EXUUPrice).toFixed(4) + ' USDT';
                }
                if (this.pages == 2) {
                    this.value2 = (this.value * parseFloat(this.magnification)).toFixed(4) + ' USDT';
                }
            },
        },
        mounted() {
            this.number = this.$route.query.times
            this.buycontain()
        },
        methods: {
            depositListss() {
                coinMmoney.depositList({
                    coinId: this.coinId,
                    cycle: this.number
                }).then(res => {
                    this.list = res
                    this.reward = res.data.givingSwitch
                    this.magnification = res.data.givingRatio
                    this.EXUUPrice = res.data.EXUUPrice
                    this.USDTPrice = res.data.USDTPrice
                    if (this.option1[0].coinId == 1) {
                        this.option1[0].text = 'EXUU';
                        this.placeholderBuy = 'EXUU';
                    } else if (this.option1[0].coinId == 2) {
                        this.option1[0].text = 'USDT';
                        this.placeholderBuy = 'USDT';
                    }
                })
            },
            depositList(item) {
                coinMmoney.depositList({
                    coinId: item,
                    cycle: this.number
                }).then(res => {
                    this.list = res;
                    this.reward = res.data.givingSwitch;
                    this.magnification = res.data.givingRatio;
                    this.EXUUPrice = res.data.EXUUPrice;
                    this.USDTPrice = res.data.USDTPrice;
                    if (item === 1) {
                        this.value2 = (this.value * parseFloat(this.magnification) * this.EXUUPrice).toFixed(4) + ' USDT';
                    }
                    if (item === 2) {
                        this.value2 = (this.value * parseFloat(this.magnification)).toFixed(4) + ' USDT';
                    }
                })
            },
            walletAccountss(item) {
                if (item == 1) {
                    this.axios.get(process.env.API_HOST + 'my/wallet_account/1').then(res => {
                        if (res.data.code == 200) {
                            this.listnumber = res.data.data.availableNum;
                        }
                    })
                } else if (item == 2) {
                    this.axios.get(process.env.API_HOST + 'my/wallet_account/2').then(res => {
                        if (res.data.code == 200) {
                            this.listnumber = res.data.data.availableNum;
                        }
                    })
                }
            },
            // 切换
            check(value1) {
                if (value1 === 1 && this.option1[0].coinId == 1) {
                    this.placeholderBuy = 'EXUU';
                    this.depositList(1);
                    this.walletAccountss(1);
                    this.pages = this.option1[0].coinId;
                }
                if (value1 === 1 && this.option1[0].coinId == 2) {
                    this.placeholderBuy = 'EXUU';
                    this.depositList(2);
                    this.walletAccountss(2);
                    this.pages = this.option1[0].coinId;
                }
                if (value1 === 2 && this.option1[1].coinId == 1) {
                    this.placeholderBuy = 'USDT';
                    this.depositList(1);
                    this.walletAccountss(1);
                    this.pages = this.option1[1].coinId;
                }
                if (value1 === 2 && this.option1[1].coinId == 2) {
                    this.placeholderBuy = 'USDT';
                    this.depositList(2);
                    this.walletAccountss(2);
                    this.pages = this.option1[1].coinId;
                }
            },
            buycontain() {
                // 购买说明
                this.axios.get(process.env.API_HOST + 'web_config/configs/WEB_CONFIG_PURCHASE').then(res => {
                    if (res.data.code == 200) {
                        try {
                            this.buySure = res.data.data.value;
                        } catch (e) {

                        }
                    }
                });
                // 根据周期获取币种
                coinMmoney.cycle({
                    cycle: this.number
                }).then(res => {
                    this.option1 = res.data
                    this.coinId = this.option1[0].coinId
                    // console.log(this.coinId+10000)
                    if (this.coinId == 1) {
                        this.axios.get(process.env.API_HOST + 'my/wallet_account/1').then(res => {
                            if (res.data.code == 200) {
                                this.listnumber = res.data.data.availableNum;
                            }
                        })
                    } else if (this.coinId == 2) {
                        this.axios.get(process.env.API_HOST + 'my/wallet_account/2').then(res => {
                            if (res.data.code == 200) {
                                this.listnumber = res.data.data.availableNum;
                            }
                        })
                    }
                    for (var i = 0; i < this.option1.length; i++) {
                        if (this.option1[0].coinId == 1) {
                            this.coinId = 1;
                            this.option1[0].value = 1;
                            this.option1[0].text = 'EXUU';
                            this.placeholderBuy = 'EXUU';
                            this.pages = this.option1[0].coinId;
                        }
                        if (this.option1[0].coinId == 2) {
                            this.coinId = 2;
                            this.option1[0].value = 1;
                            this.option1[0].text = 'USDT';
                            this.placeholderBuy = 'USDT';
                            this.pages = this.option1[0].coinId;
                        }
                        if (this.option1.length == 2) {
                            this.coinId = this.option1[0].coinId
                            if (this.option1[1].coinId == 1) {
                                this.option1[1].text = 'EXUU';
                                this.option1[1].value = 1;
                            }
                            if (this.option1[1].coinId == 2) {
                                this.option1[1].text = 'USDT';
                                this.option1[1].value = 2;
                            }
                        }
                    }
                    this.depositListss()
                });
                this.axios.get(process.env.API_HOST + 'web_config/configs/WEB_CONFIG_PRODUCT_NAME').then(res => {
                    if (res.data.code == 200) {
                        try {
                            this.company = res.data.data.value;
                        } catch (e) {

                        }
                    }
                });
                if (localStorage.getItem("checked") === 'true') {
                    this.checked = true;
                } else {
                    this.checked = false;
                }
            },
            // 协议
            showLists() {
                this.axios.get(process.env.API_HOST + 'web_config/configs/WEB_CONFIG_SERVICE_AGREEMENT').then(res => {
                    if (res.data.code == 200) {
                        this.agreement = res.data.data.value;
                        this.showList = true;
                    }
                })
            },
            appointmentbtn() {
                if (this.value == '') {
                    this.$toast(this.$t('DepositBuy.v13'));
                    return false;
                }
                if (this.checked == false) {
                    this.$toast(this.$t('DepositBuy.v14'));
                    return false;
                }
                // 根据周期获取币种
                this.loading = true;
                coinMmoney.appointmentCoin({
                    cycle: this.number,
                    num: this.value,
                    coinId: this.pages
                }).then(res => {
                    if (res.code == 200) {
                        localStorage.setItem("checked", this.checked);
                        this.$router.push({
                            path: '/DepositMmoney'
                        });
                        this.$toast(res.msg);
                    } else {
                        this.$toast(res.msg);
                    }
                    this.loading = false;
                })
            }
        }
    };
</script>

<style lang="less" scoped>
  .cf {
    zoom: 1;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .pr {
    position: relative;
  }

  .cf:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
  }

  .head {
    background: #fff;
    color: #333;
  }

  .head .return:after {
    border-color: #333;
  }

  .head .operating /deep/ i {
    vertical-align: middle;
  }

  .operating {
    color: #333;
  }

  .overlay {
    background: #fff;
    overflow-y: scroll;
  }

  .term {
    padding: 15px;

    div {
      p {
        font-size: 16px;
        font-weight: 700;
        color: #333;

        &:nth-child(2) {
          font-size: 12px;
          color: #666;
          margin-top: 5px;
        }
      }

      &:nth-child(2) {
        p {
          font-size: 13px;
          color: #3fb776;
          text-align: right;
        }
      }
    }
  }

  .price {
    margin: 0 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;

    i {
      font-size: 20px;
    }

    .van-cell {
      background: #fff;
      padding: 10px 5px;
    }
  }

  .price /deep/ .van-field__control::-webkit-input-placeholder {
    color: #ccc !important;
    font-size: 14px !important;
    font-weight: 500;
  }

  // .price /deep/ .van-field__control::-webkit-input-placeholder {color: red!important;}
  .price /deep/ .van-field__control {
    color: #333 !important;
    font-size: 18px;
    font-weight: 700;
  }

  .price /deep/ .van-hairline--top-bottom::after {
    border-width: 0;
  }

  .useNumber {
    margin: 10px 15px;
    font-size: 12px;
    color: #666;

    i {
      color: #3fb776;
      display: inline-block;
      margin: 0 5px;
    }
  }

  .chooseCoin {
    margin: 30px 15px 6px;
    color: #666;
    font-size: 12px;
  }

  .chooseItem {
    margin: 0 15px;
    position: relative;
    color: #333;
  }

  .chooseItem /deep/ .van-dropdown-menu__item {
    justify-content: left !important;
  }

  .chooseItem /deep/ .van-dropdown-menu__title::after {
    top: 6px;
  }

  .chooseItem /deep/ .van-dropdown-menu__title--down::after {
    top: 10px;
  }

  .chooseItem /deep/ .van-overlay {
    height: inherit;
  }

  .chooseItem /deep/ .van-dropdown-menu {
    width: 100%;
  }

  .chooseItem /deep/ .van-dropdown-item {
    width: 93%;
    left: 15px;
  }

  // .chooseItem /deep/ .van-dropdown-item{width: calc(100% - 30px);left:15px}
  .chooseItem /deep/ .van-cell {
    background: #fff;
    color: #999;
  }

  .explain {
    margin: 25px 15px;
    background: #f7fafd;
    border-radius: 5px;
    min-height: 140px;
    padding: 10px;
  }

  .explain p:nth-child(1) {
    font-size: 14px;
    color: #333;
  }

  .explain p:nth-child(2) {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }

  .server {
    margin: 30px 15px 20px;
  }

  .server /deep/ .van-checkbox {
    display: inline-block;
    vertical-align: middle;
  }

  .server p {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #999;
    position: absolute;
    margin-top: 5px;
    margin-left: 10px;
  }

  .server /deep/ .van-checkbox__icon {
    height: 16px;
    line-height: 16px;
  }

  .server /deep/ .van-checkbox__icon--checked .van-icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 13px;
    background-color: #3fb776;
    border-color: #3fb776;
    color: #fff;
  }

  .server /deep/ .van-checkbox__icon--round .van-icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
  }

  .server i {
    color: #3fb776;
    padding: 0 5px;
  }

  // .van-popup--bottom {
  //   height: 100%;
  // }
  .abs {
    margin: 0px 15px;
  }

  .abs p {
    text-align: center;
    color: #3d4145;
    padding: 10px 0
  }

  .abs p:nth-child(2) {
    font-size: 14px;
    color: #3d4145;
    padding: 0 15px 15px;
    text-align: left
  }

  .abs p:nth-child(3) {
    font-size: 14px;
    color: #fff;
    background: #3fb776;
    border-radius: 5px;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 15px;
  }

  /deep/ .appointmentBtn {
    margin: 25px 15px;
    // padding: 12px 0;
    background: #3fb776;
    border-radius: 10px;
    color: #fff;
    text-align: center;
  }
</style>
